<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
      // 创建一个组件，就是一个函数
      function Hello() {
        return <button>Hello</button>;
      }

      Hello.World = function () {
        return <button>World</button>;
      };

      // 1. 创建 root
      const root = ReactDOM.createRoot(document.querySelector("#root"));

      // 2. 使用 JSX 语法，创建 虚拟节点 or 虚拟DOM
      const box = "a";

      // 如下的html内容，是后端接口返回的一段富文本（带有htm雷元素的内容）
      const html = "<button>富文本</button>";

      const vNode = (
        <div
          id="box"
          className={box}
          style={{ color: "red", fontSize: "16px" }}
        >
          <Hello></Hello>

          <Hello.World></Hello.World>

          <label htmlFor="username">用户名</label>

          <input id="username" type="text" />

          <hr />
          <div dangerouslySetInnerHTML={{ __html: html }}></div>

          <hr />

          <div>{undefined}</div>
        </div>
      );

      // 3. 使用 root.render 渲染内容到挂载点
      root.render(vNode);
    </script>
  </body>
</html>
